<template>
    <div class="main">
        <!-- 使用list组件包裹div.one -->
        <van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad">
            <!-- .one为每一条记录，需要循环 -->
            <div class="one" @click="go(item.filmId)" v-for="item in list" :key="item.filmId">
                <van-card class="card">
                    <!-- 插槽：具名插槽，template标签形式，允许使用#号替代name属性，其后面的名字即插槽的名字。用插槽可以让我们在这里自定义样式，如果有样式需求，这里就得用插槽形式 -->
                    <template #desc>
                        <div class="desc">
                            <div>
                                观众评分 <span class="grade">{{ item.grade }}</span>
                            </div>
                            <div>主演：{{ item.actors | parseActors }}</div>
                            <div>{{ item.nation }} | {{ item.runtime }}分钟</div>
                        </div>
                    </template>
                    <template #title>
                        <div class="title">
                            {{ item.name }} <span class="filmType">{{ item.filmType.name }}</span>
                        </div>
                    </template>
                    <template #thumb>
                        <img class="thumb" :src="item.poster" />
                    </template>
                </van-card>
                <!-- 购票按钮 -->
                <div class="right">
                    <van-tag plain class="buyBtn" type="danger" size="large" color="#ff5f16">购票</van-tag>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
// 导入外部的模块
import Vue from "vue";
import { Card, Tag, List } from "vant";
import uri from "@/config/uri";
Vue.use(Card);
Vue.use(Tag);
Vue.use(List);
export default {
    data() {
        return {
            // 城市id
            cityId: localStorage.getItem("cityId") ? localStorage.getItem("cityId") : process.env.VUE_APP_DEFAULT_CITY,
            // 每次获取电影的数量
            pageSize: 10,
            // 显示的起始页码
            pageNum: 1,
            // 电影列表的数据变量
            list: [],
            // 加载状态，false表示未开始加载，true表示加载中
            loading: false,
            // 结束状态，falsee表示没有全部加载完，true表示已经全部加载完
            finished: false,
        };
    },
    methods: {
        onLoad() {
            // 通过官网的代码，可以判断，这里应该写获取数据的方法
            let url = uri.nowPlaying + `?cityId=${this.cityId}&pageNum=${this.pageNum}&pageSize=${this.pageSize}&cors=T`;
            this.$http.get(url).then((res) => {
                // 判断
                if (res.status === 0) {
                    // 成功
                    this.list = [...this.list, ...res.data.films];
                    // 此次请求已经结束，将加载状态改为否
                    this.loading = false;
                    // 判断是否还有剩余的数据
                    if (this.pageNum < Math.ceil(res.data.total / this.pageSize)) {
                        // 页码++
                        this.pageNum++;
                    } else {
                        // 标记已经全部加载结束
                        this.finished = true;
                    }
                }
            });
        },
        // 去往详情
        go(filmId) {
            this.$router.push("/film/" + filmId);
        },
    },
    filters: {
        // 处理主演
        parseActors(actors) {
            // 卖座的数据，动画片是没有主演的（null）
            if (actors) {
                let str = "";
                actors.forEach((el) => {
                    str += el.name + " ";
                });
                // 通过字符串截取
                return str.length > 16 ? str.substr(0, 16) + "..." : str;
            } else {
                return "暂无主演";
            }
        },
    },
};
</script>

<style scoped>
.main {
    /* margin-top: 10px; */
    margin-bottom: 50px;
}
.one {
    background: #fff;
    display: flex;
    border-bottom: 1px solid rgb(248, 245, 245);
}
.card {
    width: 80%;
    background: #fff;
}
.right {
    width: 20%;
    text-align: center;
}
.buyBtn {
    margin: 50% auto;
}
.title {
    font-size: 16px;
    color: #191a1b;
}
.filmType {
    color: #fff;
    background: #d2d6dc;
    font-size: 9px;
    padding: 1px 4px;
}
.grade {
    color: #ffb232;
    font-size: 14px;
}
.thumb {
    width: 66px;
    height: 100%;
    border-radius: 0;
}
/* 重新定义vant的卡片组件缩略图的宽度 */
.van-card__thumb {
    width: 70px;
}
.desc {
    color: #797d82;
    font-size: 13px;
    margin-top: 5px;
}
</style>
